<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit" />
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <title>Title</title>
    <link href="/Content/LMS/css/base/reset.css" rel="stylesheet" />
    <link href="/Content/LMS/css/base/base.css" rel="stylesheet" />
    <!--<link href="css/fonts/icomoon/style.css" rel="stylesheet" />-->
    <link href="/Content/LMS/plugins/modal/modal.css" rel="stylesheet" />
    <link href="/Content/LMS/plugins/swiper3/swiper.min.css" rel="stylesheet" />
    <link href="/Content/LMS/css/struct/custom.css" rel="stylesheet" />
    <link href="/Content/LMS/css/struct/layout.css" rel="stylesheet" />
    <link href="/Content/LMS/css/theme/default/style.css" rel="stylesheet" />
</head>
<body>
    <div class="background"></div>
    <div class="left-menu" data-struct="header footer">
        <header class="menu-header">
            <h4>User Info</h4>
            <div class="sub-title">Nothing is impossible!</div>
        </header>
        <div class="container">
            <div class="list-scrollbar">
                <ul class="list nbt">
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                </ul>
            </div>
        </div>
        <footer class="menu-footer">
            <div>
                <i class="icomoon icon-setting-fill"></i>
                <span>设置</span>
            </div>
        </footer>
    </div>
    <div class="wrapper list1-wrapper" data-struct="header">
        <header class="header">
            <div class="left-button" data-action="open-left-menu">
                <button type="button" class="btn">
                    <i class="icomoon icon-menu"></i>
                </button>
            </div>
            <div class="right-button">
                <a href="#">
                    <img src="/Content/LMS/images/logo.png" class="logo">
                </a>
                <!--<div class="btn-group" align="right">
                    <button class="btn btn-unstyled btn-dropdown nocaret">
                        <i class="icomoon icon-more"></i>
                    </button>
                    <ul class="list link dropdown" id="list1">
                        <li><a href="javascript:;">DropDownItem 1</a></li>
                        <li><a href="javascript:;">DropDownItem 2</a></li>
                        <li><a href="javascript:;">DropDownItem 3</a></li>
                        <li><a href="javascript:;">DropDownItem 4</a></li>
                        <li><a href="javascript:;">DropDownItem 5</a></li>
                    </ul>
                </div>-->
            </div>
            <!--<div class="head-center">
                Title
            </div>-->
        </header>
        <div class="container nogap" role="main">
            <div class="banner">
                <div id="swiper1" class="swiper-container demo">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="slide-image" style="background-image: url(/Content/LMS/images/slide.png)">Slide 1</div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image" style="background-image: url(/Content/LMS/images/slide.png)">Slide 2</div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image" style="background-image: url(/Content/LMS/images/slide.png)">Slide 3</div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 如果需要导航按钮 -->
                    <!--<div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>-->
                    <!-- 如果需要滚动条 -->
                    <!--<div class="swiper-scrollbar"></div>-->
                </div>
                <div class="nav-tabs padding-10">
                    <div>
                        全套课程精讲
                    </div>
                    <ul class="list-inline small">
                        <li>
                            <ul class="list-appraise disabled" data-init="3">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </li>
                        <li>
                            25份评价
                        </li>
                        <li>
                            <i class="icomoon icon-user"></i>
                            200人在线学习
                        </li>
                    </ul>
                </div>
            </div>
            <div class="list-course" style="padding-top: 230px;">
                <div class="list-scrollbar">
                    <ul class="list small">
                        <li>
                            <button id="btnComment" type="button" class="btn btn-border btn-radius margin-top-5 margin-bottom-5" data-modal="#emModal">写评论</button>
                        </li>
                        <li>
                            <div class="align-left">
                                <div class="user-avatar avatar-small" style="background-image: url(/Content/LMS/images/bg1.jpg)"></div>
                            </div>
                            <div class="align-right">
                                <div class="margin-bottom-5">
                                    <div class="align-left">用户A</div>
                                    <div class="align-right">
                                        <span class="text-gray-light">2016-4-12</span>
                                    </div>
                                </div>
                                <div class="text-left">
                                    <div class="margin-bottom-10">
                                        课程评价：
                                        <ul class="list-appraise disabled" data-init="3">
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                    </div>
                                    <div class="text-gray-light">
                                        这个教程教的很好
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="align-left">
                                <div class="user-avatar avatar-small" style="background-image: url(/Content/LMS/images/bg1.jpg)"></div>
                            </div>
                            <div class="align-right">
                                <div class="margin-bottom-5">
                                    <div class="align-left">用户A</div>
                                    <div class="align-right">
                                        <span class="text-gray-light">2016-4-12</span>
                                    </div>
                                </div>
                                <div class="text-left">
                                    <div class="margin-bottom-10">
                                        课程评价：
                                        <ul class="list-appraise disabled" data-init="3">
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                    </div>
                                    <div class="text-gray-light">
                                        这个教程教的很好
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="align-left">
                                <div class="user-avatar avatar-small" style="background-image: url(/Content/LMS/images/bg1.jpg)"></div>
                            </div>
                            <div class="align-right">
                                <div class="margin-bottom-5">
                                    <div class="align-left">用户A</div>
                                    <div class="align-right">
                                        <span class="text-gray-light">2016-4-12</span>
                                    </div>
                                </div>
                                <div class="text-left">
                                    <div class="margin-bottom-10">
                                        课程评价：
                                        <ul class="list-appraise disabled" data-init="3">
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                    </div>
                                    <div class="text-gray-light">
                                        这个教程教的很好
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="align-left">
                                <div class="user-avatar avatar-small" style="background-image: url(/Content/LMS/images/bg1.jpg)"></div>
                            </div>
                            <div class="align-right">
                                <div class="margin-bottom-5">
                                    <div class="align-left">用户A</div>
                                    <div class="align-right">
                                        <span class="text-gray-light">2016-4-12</span>
                                    </div>
                                </div>
                                <div class="text-left">
                                    <div class="margin-bottom-10">
                                        课程评价：
                                        <ul class="list-appraise disabled" data-init="3">
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                    </div>
                                    <div class="text-gray-light">
                                        这个教程教的很好
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="align-left">
                                <div class="user-avatar avatar-small" style="background-image: url(/Content/LMS/images/bg1.jpg)"></div>
                            </div>
                            <div class="align-right">
                                <div class="margin-bottom-5">
                                    <div class="align-left">用户A</div>
                                    <div class="align-right">
                                        <span class="text-gray-light">2016-4-12</span>
                                    </div>
                                </div>
                                <div class="text-left">
                                    <div class="margin-bottom-10">
                                        课程评价：
                                        <ul class="list-appraise disabled" data-init="3">
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                    </div>
                                    <div class="text-gray-light">
                                        这个教程教的很好
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="emModal" class="modal-wrapper">
        <div id="emContainer" class="modal-container modal-lg" style="padding: 0">
            <div class="modal-content" data-emoticon-element="wrapper">
                <div class="modal-body" style="border-radius: 0">
                    <div class="margin-bottom-20 text-center">
                        <input id="hidAppraise" type="hidden" />
                        <ul class="list-appraise" data-input="#hidAppraise" style="font-size: 20px;">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div id="emoticon" class="component-emoticon">
                        <textarea id="txtComment"></textarea>
                        <div class="btn-group block">
                            <div class="align-left">
                                <div class="btn-switch btn-emoticon" data-input="#txtComment">
                                    <i id="btnEmoticon" class="icomoon icon-laugh"></i>
                                    <i class="icomoon icon-keyboard"></i>
                                </div>
                            </div>
                            <div class="align-right">
                                <button id="btnPublish" type="button" class="btn btn-xs btn-theme" data-dismiss="emoticon" data-clear="#txtComment">发表</button>
                            </div>
                        </div>
                        <div data-part="emoticon"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--<script src="js/zepto/zepto.js"></script>
    <script src="js/zepto/selector.js"></script>
    <script src="js/zepto/compatible.js"></script>
    <script src="js/animation/tween.js"></script>-->
    <script src="/Content/LMS/js/jquery/jquery-1.11.2.js"></script>
    <script src="/Content/LMS/js/fastclick/fastclick.js"></script>
    <script src="/Content/LMS/plugins/modal/modal.js"></script>
    <script src="/Content/LMS/plugins/swiper3/swiper.jquery.min.js"></script>
    <script src="/Content/LMS/js/global.js"></script>
    <script type="text/javascript">
        $(function () {

            //初始化评价控件
            Global.InitAppraise();

            //加载表情插件
            Global.Emoticon.Load();
            var timeoutID = 0;
            $("#emoticon").on("click", "#btnEmoticon, #btnPublish", function(){
                clearTimeout(timeoutID);
                timeoutID = setTimeout(function(){
                    $("#emModal").height($("#emContainer").height());
                },100);
            });

            //初始化轮播图
            var swiper1 = new Swiper("#swiper1", {
                loop: true,
                speed: 600,
                autoplay: 3000,
                autoplayDisableOnInteraction: false
            });

        })
    </script>
<script type="text/javascript" charset="utf-8" src="http://192.168.1.51:8132/livereload.js"></script></body>
</html>